<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>中国房源和二手房数据地图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 显示加载动画
        myChart.showLoading();

        // 硬编码的数据
        var jsonData = [
            ["省份", "房源总数", "二手房数量"],
            ["北京市", 50000, 15000],
            ["上海市", 60000, 20000],
            ["广东省", 70000, 30000],
            ["江苏省", 55000, 18000],
            ["浙江省", 65000, 22000],
            ["河北省", 40000, 12000],
            ["河南省", 45000, 13000],
            ["山东省", 60000, 25000],
            ["辽宁省", 35000, 10000],
            ["吉林省", 30000, 9000],
            ["黑龙江省", 32000, 9500],
            ["内蒙古自治区", 38000, 11000],
            ["陕西省", 42000, 14000],
            ["甘肃省", 39000, 11000],
            ["安徽省", 39000, 11000],
            ["江西省", 39000, 11000],
            ["福建省", 39000, 11000],
            ["宁夏回族自治区", 39000, 11000],
            ["山西省", 37000, 12500],
            ["重庆市", 39000, 11000],
            ["湖北省", 50000, 17000],
            ["湖南省", 48000, 16000],
            ["四川省", 55000, 19000],
            ["重庆省", 46000, 15000],
            ["贵州省", 29000, 8500],
            ["云南省", 31000, 9000],
            ["西藏自治区", 15000, 4000],
            ["青海省", 22000, 6500],
            ["新疆维吾尔自治区", 25000, 7000],
            ["广西壮族自治区", 33000, 10000],
            ["海南省", 20000, 6000],
            ["天津市", 40000, 13000],
            ["香港特别行政区", 25000, 8000],
            ["澳门特别行政区", 15000, 4000],
            ["台湾省", 28000, 9000]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 省份名称
                        value: row[1],  // 房源总数
                        secondHandHouse: row[2]  // 二手房数量
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initChinaMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('china', geoJson);

                    // 检查省份数据
                    console.log('Parsed data:', data);

                    myChart.setOption({
                        title: {
                            text: '中国各省房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                console.log('Tooltip params:', params);  // 调试信息
                                var secondHandHouse = params.data && params.data.secondHandHouse != null ? params.data.secondHandHouse : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                       '房源总数: ' + totalValue + '<br/>' +
                                       '二手房数量: ' + secondHandHouse;
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 70000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'china',
                                label: {
                                    show: true
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化地图
        var parsedData = parseData(jsonData);
        initChinaMap(parsedData);
    </script>
</body>
</html>